@import "custom_styles";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;800;900&display=swap");

@layer components {
  .theme-pupilfirst {
    --color-black: 0 0 0;
    --color-white: 255 255 255;

    --color-primary-50: 248 245 252;
    --color-primary-100: 240 234 251;
    --color-primary-200: 211 191 243;
    --color-primary-300: 176 142 230;
    --color-primary-400: 151 106 226;
    --color-primary-500: 96 37 192;
    --color-primary-600: 77 30 154;
    --color-primary-700: 56 13 128;
    --color-primary-800: 53 21 107;
    --color-primary-900: 31 13 64;
    --color-primary-950: 20 8 42;

    --color-gray-50: 249 250 251;
    --color-gray-100: 243 244 246;
    --color-gray-200: 229 231 235;
    --color-gray-300: 209 213 219;
    --color-gray-400: 156 163 175;
    --color-gray-500: 107 114 128;
    --color-gray-600: 75 85 99;
    --color-gray-700: 55 65 81;
    --color-gray-800: 31 41 55;
    --color-gray-900: 17 24 39;
    --color-gray-950: 11 16 28;

    --color-focusColor-50: 238 242 255;
    --color-focusColor-100: 224 231 255;
    --color-focusColor-200: 199 210 254;
    --color-focusColor-300: 165 180 252;
    --color-focusColor-400: 129 140 248;
    --color-focusColor-500: 99 102 241;
    --color-focusColor-600: 79 70 229;
    --color-focusColor-700: 67 56 202;
    --color-focusColor-800: 55 48 163;
    --color-focusColor-900: 49 46 129;
    --color-focusColor-950: 33 30 103;

    --color-red-50: 255 241 242;
    --color-red-100: 255 228 230;
    --color-red-200: 254 205 211;
    --color-red-300: 253 164 175;
    --color-red-400: 251 113 133;
    --color-red-500: 244 63 94;
    --color-red-600: 225 29 72;
    --color-red-700: 190 18 60;
    --color-red-800: 159 18 57;
    --color-red-900: 136 19 55;
    --color-red-950: 76 5 25;

    --color-yellow-50: 254 252 232;
    --color-yellow-100: 254 249 195;
    --color-yellow-200: 254 240 138;
    --color-yellow-300: 253 224 71;
    --color-yellow-400: 250 204 21;
    --color-yellow-500: 234 179 8;
    --color-yellow-600: 202 138 4;
    --color-yellow-700: 161 98 7;
    --color-yellow-800: 133 77 14;
    --color-yellow-900: 113 63 18;
    --color-yellow-950: 66 32 6;

    --color-orange-50: 255 247 237;
    --color-orange-100: 255 237 213;
    --color-orange-200: 254 215 170;
    --color-orange-300: 253 186 116;
    --color-orange-400: 251 146 60;
    --color-orange-500: 249 115 22;
    --color-orange-600: 234 88 12;
    --color-orange-700: 194 65 12;
    --color-orange-800: 154 52 18;
    --color-orange-900: 124 45 18;
    --color-orange-950: 67 20 7;

    --color-blue-50: 238 242 255;
    --color-blue-100: 224 231 255;
    --color-blue-200: 199 210 254;
    --color-blue-300: 165 180 252;
    --color-blue-400: 129 140 248;
    --color-blue-500: 99 102 241;
    --color-blue-600: 79 70 229;
    --color-blue-700: 67 56 202;
    --color-blue-800: 55 48 163;
    --color-blue-900: 49 46 129;
    --color-blue-950: 31 28 107;

    --color-green-50: 240 253 244;
    --color-green-100: 220 252 231;
    --color-green-200: 187 247 208;
    --color-green-300: 134 239 172;
    --color-green-400: 74 222 128;
    --color-green-500: 34 197 94;
    --color-green-600: 22 163 74;
    --color-green-700: 21 128 61;
    --color-green-800: 22 101 52;
    --color-green-900: 20 83 45;
    --color-green-950: 5 46 22;

    --font-family-sans: "Inter", sans-serif;
  }

  html {
    @apply theme-pupilfirst;
  }
}

.theme-pupilfirst .logo_on_light_bg {
  display: block;
}

.theme-pupilfirst .logo_on_dark_bg {
  display: none;
}

.theme-pupilfirst .icon_on_light_bg {
  display: block;
}

.theme-pupilfirst .icon_on_dark_bg {
  display: none;
}
